<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <script src="./element.js"></script>
    <link rel="stylesheet" href="./element.css">
    <style>
        body {
            background-color: #fff;
            visibility: hidden;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <section class="el-container is-vertical">
            <header class="el-header" style="height: 60px;">
                服务是阿里云，服务端问题找阿里云反馈。随便写的不用报错，直接去Git提Pr，谢谢 https://github.com/yqjiang/alisupres 顺便关注下B站@暗切线。有啥新东西专栏见。
            </header>
            <main class="el-main">
                <el-form ref="form" :model="form" label-width="100px">
                    <div class="el-form-item"><label class="el-form-item__label" style="width: 100px;">账号信息</label>
                        <div class="el-form-item__content" style="margin-left: 100px;">
                            <div class="el-col el-col-11">
                                <div class="el-input">
                                    <input type="text" autocomplete="off" placeholder="AccessKeyId"
                                        class="el-input__inner" v-model="form.AccessKeyId">
                                </div>
                            </div>
                            <div class="line el-col el-col-2">&nbsp;</div>
                            <div class="el-col el-col-11">
                                <div class="el-input">
                                    <input type="text" autocomplete="off" placeholder="AccessKeySecret"
                                        class="el-input__inner" v-model="form.AccessKeySecret">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="el-form-item"><label class="el-form-item__label" style="width: 100px;">视频信息</label>
                        <div class="el-form-item__content" style="margin-left: 100px;">
                            <div class="el-input">
                                <input type="text" autocomplete="off" placeholder="视频地址" class="el-input__inner" v-model="form.url">
                            </div>
                        </div>
                    </div>
                    <el-form-item label="比特率倍数">
                        <el-slider v-model="form.rate" :max="100" :min="2"></el-slider>
                    </el-form-item>
                    <div class="el-form-item">
                        <div class="el-form-item__content" style="margin-left: 100px;"><button type="button"
                                class="el-button el-button--primary" @click="onSubmit" :disabled="form.disabled">
                                <span>立即创建</span></button>
                        </div>
                    </div>
                </el-form>
                  <div class="el-card box-card is-always-shadow">
                    <div class="el-card__header">
                        <div class="clearfix">
                            <span>当前任务:{{id}}</span>
                            <el-alert v-if="error"
                                title="error"
                                type="error"
                        >
                        </el-alert>
                        </div>
                    </div>
                    <div class="el-card__body">
                        <div class="text item">
                            <p>任务：{{task.id}}</p>
                            <p>状态：{{task.status}}</p>
                            <div class="el-input">
                                <input type="text" autocomplete="off" placeholder="执行结果" class="el-input__inner" v-model="task.url">
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </section>
    </div>
    <script src="./index.js"></script>
    <script> document.body.style.visibility = "visible" </script>
</body>
</html>